<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false"%>
<html lang="en">
<% HttpSession session = request.getSession(true);
	String user = (String)session.getAttribute("user");
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
	<!--begin head-->
	<head>
		<meta charset="utf-8">
		<title>Autopista</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- set content to full screen on iphones -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="description" content="">
		<meta name="author" content="">


        <!--[if lte IE 6]>
            <link rel="stylesheet" href="//universal-ie6-css.googlecode.com/files/ie6.1.1.css" media="screen, projection">
        <![endif]-->

		<!--[if !lte IE 6]><!-->
            <!-- Load Google Web Font -->
            <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
            <!-- Load style.css: contains all css files concatenated to one single file -->
            <link href="resources/css/style.css" rel="stylesheet">
		<!--<![endif]-->

		<!-- Load HTMLShiv for IE9 HTML5 support -->
		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->	

		<!-- Your Favoriate Icons -->
		<link rel="shortcut icon" href="resources/ico/favicon.ico">
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="resources/ico/apple-touch-icon-144-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="resources/ico/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="resources/ico/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="resources/ico/apple-touch-icon-57-precomposed.png">
		
		<!--
			NOTE: All the javascripts have been moved to the bottom of the page to load the content faster.
		-->

	<!--Estilo para Boton, tipo hipervinculo -->
	<link href="resources/css/utileria.css" rel="stylesheet">
			
	</head><!--end head-->

	<!--begin body-->
	<body>
		<header>
	  		<!--logo area start-->
	  		<div class="logo-area">
	  			<span id="logo"></span>
	  		</div><!--end logo area-->
	  		
	  		<!--nav bar start-->
			<nav class="navbar">
				<div class="navbar-inner">
					<div class="container">
						<!--mobile nav icon (hidden:CSS)-->
						<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
							menu
						</a><!--end btn-navbar-->
						<div class="nav-collapse">
							<ul class="nav">
								
								<li class="active">
									<a href="/Autopista">Inicio</a>
								</li>
								<li>
									<a href="/Autopista/vehiculo/buscar?begin=0&end=9">Buscar vehiculos</a>
								</li>
								<li>
									<a href="/Autopista/buscar">Ofertas</a>
								</li>
								<li>
									<a href="/Autopista/contacto">Contacto</a>
								</li>
								<li>
									<a href="/Autopista/login">Login</a>
								</li>
								<% if(user != null){%>
								<li>
								 <a href=""><%= user %></a>
								 <a href="<c:url value="/j_spring_security_logout" />"> Logoff</a>
								</li>
								<% }%>
						</ul>


						</div><!-- end nav-collapse -->
					</div><!-- end container-->
				</div><!-- end navbar-inner -->
			</nav><!--end nav bar-->
		</header>

		<section id="main">
			<!-- Slider start-->
				<div id="slide-wrapper">

					<div id="banner">  				
						<div class="oneByOne_item">                                 	
							<img src="resources/slide/8339560380.jpg" alt="Placeholder" class="bigImage">
						</div>	
						<div class="oneByOne_item">                                 	
							<img src="resources/slide/9801137806.jpg" alt="Placeholder" class="bigImage">
						</div>	
						<div class="oneByOne_item">                                 	
							<img src="resources/slide/9792248481.jpg" alt="Placeholder" class="bigImage">
						</div>	
				</div>    
			       
			    </div>	<!-- end slider -->		  	
			  
			 
							
							 
			<div class="body-text">
				
				<div class="container-fluid">
					
					<div class="row-fluid">
						
						<!--west pane span9-->
						<div class="span9">
							<div class="row-fluid">
								<h1>Agregados recientemente</h1></div>
							<div class="row-fluid hotproperties">
								 <c:forEach items="${vehiculos}" var="datos"   begin="0" end="2">
								 <form action="vehiculo/vehiculoID" method="post">
					                <div class="span4 set-equal-heights-js">
					                	<div class="thumbnail">
					                	
									<a href="property.html"><img src="resources/Carros Cuernavaca/<c:out value="${datos.foto}"/>" alt="Placeholder" class="thumbnail"></a>
										
									
											<div class="caption">
													<a href="detalle.html" class="prop-title"><c:out value="${datos.titulo}"/></a>
													<p class="size">Transmision: <c:out value="${datos.transmision}"/></p>
													<p class="price">Precio: $ <c:out value="${datos.precio}"/></p>
													<ul class="list-btns">
													<li><input type="submit" id="submitbutton" onclick="envia()" value="Ver Detalle"/></li>
													</ul>
											</div>						
					                	</div>					                	
					                </div>	
					                <input type="hidden" value="<c:out value="${datos.idVehiculo}"/>" name="id"/>		
					                	</form><br/>
					                </c:forEach>					                		        
								<div class="clearfix"></div>								
							</div>													
						</div><!--end of west pane span9-->
						
						<!--east pane with width of span3-->
						<div class="span3">	
							<!--
								"Quick Search" Widget
								
								SPECIAL NOTE: Please leave the inline style for <Select></Select> "width:100%",
											  the width is automatically "Re-adjusted" with javascript
											  See "config.js" for more details	
							-->
							<div class="qbox">
				            	<h3><i class="icon-search pull-right"></i>Busqueda</h3>
								<form>
                                	<div>
				                        <label>Marca</label>
				                        <select data-placeholder="--Todas--" class="chzn-select" style="width:100%;" tabindex="0">
                                        	<option value="Todas">Todas</option>
											<option value="Audi">Audi</option>
											<option value="BMW">BMW</option>
											<option value="Chevrolet">NChevrolet</option>
											<option value="Chrysler">Chrysler</option>
											<option value="Dodge">Dodge</option>
											<option value="Ford">Ford</option>
											<option value="Honda">Honda</option>
			                        </select>
				                    </div>
				                	<div>
				                        <label>Modelo</label>
				                        <select data-placeholder="--Todos--" class="chzn-select" style="width:100%;" tabindex="0">
                                        	<option value="Todos">Todos</option>
				                            <option value="A3">A3</option>
				                            <option value="A4">A4</option>
				                            <option value="A5">A5</option>
				                            <option value="A6">A6</option>
				                        </select>
				                    </div>
			                    <div>
				                        <label>Estado</label>
				                        <select  data-placeholder="Selecciona el estado" multiple="multiple" class="chzn-select" style="width:100%;" tabindex="0">
											<option value="Morelos">Morelos</option>
											<option value="EdoMex">Edo. de Mexico</option>
											<option value="DF">Distrito Federal</option>
											<option value="Puebla">Puebla</option>
											<option value="Queretaro">Queretaro</option>
			                        </select>
				                    </div>  
				                    <div>
				                        <p>
				                            <input type="text" id="beds" readonly class="disabled">
				                        </p>

				                   		<div id="ui-slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
				                        	<div class="ui-slider-range ui-widget-header"></div>
				                            <a class="ui-slider-handle ui-state-default ui-corner-all" href="javascript:void(0)"></a>
				                            <a class="ui-slider-handle ui-state-default ui-corner-all" href="javascript:void(0)"></a>
				                        </div>
				                    </div>
				                    <div>
				                        <p>
				                            <input type="text" id="amount" readonly class="disabled" style="margin-top:10px;">
				                        </p>
				                    
				                   		<div id="ui-slider-price" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
				                        	<div class="ui-slider-range ui-widget-header"></div>
				                            <a class="ui-slider-handle ui-state-default ui-corner-all" href="javascript:void(0)"></a>
				                            <a class="ui-slider-handle ui-state-default ui-corner-all" href="javascript:void(0)"></a>
				                        </div>
				                    </div>
				                    <button class="btn btn-inverse btn-small">Buscar</button>
				                </form>
				            </div>
				            	
						</div><!--end of span3-->
						
					</div>
					
				</div>
				
			</div>
		</section><!--end section-->
		<footer>
			<div class="container-fluid">
				<div class="row-fluid">
			      <div class="span12 contact-info">
			      	<span class="span9">
			      		AutoPista - Todos los derechos reservados • <a href="mailto:info@switz.mx"> info@switz.mx</a>
			      	</span>
			      	
		      		<ul class="span3 social-network">
		      			<li><a href="javascript:void(0)"><i class="icon-linkedin-sign"></i></a></li>
		      			<li><a href="javascript:void(0)"><i class="icon-pinterest-sign"></i></a></li>
		      			<li><a href="javascript:void(0)"><i class="icon-twitter-sign"></i></a></li>
		      			<li><a href="javascript:void(0)"><i class="icon-facebook-sign"></i></a></li>
		      			<li><a href="javascript:void(0)"><i class="icon-google-plus-sign"></i></a></li>
		      		</ul>
			      	
			      </div>
			  	  <div class="clearfix"></div>
				</div><!-- end .row-fluid -->
			</div> <!-- end .container-fluid -->
		</footer>
		<!-- end footer -->
		
		<!--[if !lte IE 6]><!-->
            <!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
            <script>window.jQuery || document.write('<script src="resources/js/libs/jquery.min.js"><\/script>')</script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
            <script>window.jQuery.ui || document.write('<script src="resources/js/libs/jquery.ui.min.js"><\/script>')</script>
            
            																			<!-- RECOMMENDED: For (IE6 - IE8) CSS3 pseudo-classes and attribute selectors -->
             <!--[if lt IE 9]> 
             	<script src="js/include/selectivizr.min.js"></script> 					
             <![endif]-->
            
            <script src="resources/js/libs/jquery.ui.touch-punch.min.js"></script>				<!-- REQUIRED:  A small hack that enables the use of touch events on mobile -->
            
            <!-- Add 'http:' for testing locally -->
            <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
            
            <script src="resources/js/menu/jquery.ct.3LevelAccordion.min.js"></script>     		<!-- REQUIRED: Accordion Menu with filter-->
            <script src="resources/js/slider/jquery.responsivethumbnailgallery.min.js"></script>  <!-- REQUIRED: Responsive Gallery Plugin -->
            <script src="resources/js/slider/jquery.onebyone.min.js"></script>     				<!-- REQUIRED: Slider Plugin -->
            <script src="resources/js/slider/jquery.touchwipe.min.js"></script>    				<!-- REQUIRED: Plugin to make Slider Plugin work on Touch Devices -->
            <script src="resources/js/slider/jquery.onebyone.min.js"></script>     				<!-- REQUIRED: Slider Plugin -->
            <script src="resources/js/slider/jquery.touchwipe.min.js"></script>    				<!-- REQUIRED: Plugin to make Slider Plugin work on Touch Devices -->
    
            <script src="resources/js/include/jquery.fitvids.min.js"></script>     		 		<!-- RECOMMENDED: Responsive videos -->			
            <script src="resources/js/include/jquery.tweet.min.js"></script>     		 			<!-- OPTIONAL: Twitter display plugin -->
            <script src="resources/js/include/jquery.equal-heights.min.js"></script> 	 			<!-- RECOMMENDED: Plugin to keep div heights consistant -->	
            <script src="resources/js/include/jquery.todo.min.js"></script>					 	<!-- REQUIRED: Plugin to save "add to short list" items -->
            <script src="resources/js/include/jquery.pubsub.min.js"></script>				 		<!-- REQUIRED: (If todo.js is in use) Dependent with todo.js -->
            <script src="resources/js/include/jquery.select2.min.js"></script>			 		<!-- RECOMMENDED: Custom jQuery/searchable dropdowns -->	
            <script src="resources/js/include/bootstrap.min.js"></script> 			 			<!-- REQUIRED: For BootStrap build -->
            
            <script src="resources/js/config.js"></script>						 				<!-- DO NOT REMOVE: Contains major plugin initiations and functions -->
		<!--<![endif]-->

	</body>
</html>
